<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .toolbar{
      position: sticky;
      top: 20px;
      border: 2px solid purple;
      background-color: #fff;
    }
    .box {
      background-color: powderblue;
      height: 400px;

    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="toolbar">我是粘性布局元素</div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut repellat architecto cum provident corporis vitae aspernatur! Esse quis debitis omnis exercitationem! Doloribus iure molestias accusantium veniam dolorum consectetur error ipsa, nemo sint vitae ad expedita ipsam id. Consectetur harum facere enim accusantium vero repellat, temporibus sit laborum esse, nisi sunt.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore tenetur sapiente laudantium, ab molestias eum! Adipisci consequuntur cupiditate ullam quam, atque aspernatur reiciendis quod soluta error qui ab nobis, illo, autem molestias? Blanditiis quam suscipit accusantium aperiam, alias officiis, sapiente ex dolores ab esse officia consequuntur, natus tenetur quis accusamus.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis cum tempore aperiam accusantium tenetur quisquam ab ratione obcaecati perferendis, nulla dolorem dignissimos expedita blanditiis aut cupiditate, saepe officia quod officiis, amet optio fuga inventore adipisci. Exercitationem aliquid iure ad, qui facere placeat sed, repellat quisquam blanditiis facilis atque, debitis soluta!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus fugit laboriosam animi nam quia, voluptate optio voluptates, sed neque necessitatibus nesciunt. Dolore accusamus eum, nihil voluptatibus sit temporibus, quia repudiandae eaque nobis voluptate corporis soluta nisi inventore quas dicta? Perspiciatis quas nemo velit tenetur quis, animi sit. Vel, quo molestias.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi incidunt nobis totam omnis explicabo accusamus nisi nostrum pariatur quidem similique molestiae autem repellat cumque dolore, tenetur laborum exercitationem maxime ut id harum consequuntur quia. Nisi quo delectus corporis ratione, dignissimos asperiores aliquid exercitationem maxime eaque consectetur? Vero aperiam reiciendis minima.√</p>
</body>
</html>